import React, { Component } from 'react';
import WeUI from 'react-weui';
import '../media/css/style.scss';

const {
    Page,
    Button,
    CellsTitle,
    Form,
    FormCell,
    CellHeader,
    CellBody,
    Label,
    Input,
    ButtonArea,
    Toast
} = WeUI;

const BASEURL = "http://127.0.0.1:8000"

export default class BDLogin  extends Component {
    constructor(props) {
        super(props);
        this.loginUrl = BASEURL + "/v1/auth/login"
        this.state = {
            showToast: false,  // 点击登录显示成功
            username: "",
            password: ""
        };
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleUserNameOnChange = this.handleUserNameOnChange.bind(this);
        this.handlePassWordOnChange = this.handlePassWordOnChange.bind(this);
    }
    // 登录提交
    handleSubmit() {
        // 构造form data数据
        let formData = new FormData();
        formData.set('username', this.state.username);
        formData.set('password', this.state.password);
        fetch(this.loginUrl + "/api/login/", {
            method: 'post',
            body: formData,
        }).then((response) =>{
            if (response.status !== 200){
                console.log('Status Code: ' + response.status);
                return;
            }
            response.json().then((data)=>{
                if (data['success']){
                    this.setState({ showToast: true });
                    this.state.toastTimer = setTimeout(() => {
                        this.setState({showToast: false});
                        this.clickHandle("/user");
                    }, 800);
                }else{
                    console.log('登录失败', data['success']);
                }
            });
        }).catch((err)=>{
            console.log('ERROR:', err);
        })

    }

    clickHandle(url) {
        this.props.history.push(url);
    }
    // 传递用户名
    handleUserNameOnChange(event){
        this.setState({
            username: event.target.value
        })
    }
    //传递密码
    handlePassWordOnChange(event){
        this.setState({
            password: event.target.value
        })
    }

    render () {
        return (
            <Page className="loginPageClass" transition={true} infinteLoader={true} ptr={false}>
                <CellsTitle>登录</CellsTitle>
                <Form>
                    <FormCell>
                        <CellHeader>
                            <Label>用户名</Label>
                        </CellHeader>
                        <CellBody>
                            <Input value={this.state.username} onChange={this.handleUserNameOnChange} 
                            placeholder="请填写您的用户名"></Input>
                        </CellBody>
                    </FormCell>
                    <FormCell>
                        <CellHeader>
                            <Label>密码</Label>
                        </CellHeader>
                        <CellBody>
                            <Input type="password" value={this.state.password} onChange={this.handlePassWordOnChange} 
                            placeholder="请填写您的密码"></Input>
                        </CellBody>
                    </FormCell>
                </Form>
                <ButtonArea>
                    <Button onClick={this.handleSubmit}>登录</Button>
                </ButtonArea>
                <Toast icon="success-no-circle" show={this.state.showToast}>登录成功</Toast>
                <div className="regdiv" onClick={this.clickHandle.bind(this, "/reg")}>
                    新用户注册
                </div>
            </Page>
        )
    }

}